﻿<phone:PhoneApplicationPage 
    x:Class="SandwichFlow.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:jumpList="clr-namespace:WP7Contrib.View.Controls.JumpList;assembly=WP7Contrib.View.Controls"
    xmlns:behaviour="clr-namespace:WP7Contrib.View.Controls.Behaviors;assembly=WP7Contrib.View.Controls"
    xmlns:tk="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:tkLayout="clr-namespace:System.Windows.Controls"
    xmlns:conv="clr-namespace:MetroInMotion.Converters"
    xmlns:mim="clr-namespace:MetroInMotionUtils"
    xmlns:contribControls="clr-namespace:WP7Contrib.View.Controls;assembly=WP7Contrib.View.Controls"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <phone:PhoneApplicationPage.Resources>
        <conv:BooleanToTransitionConverter x:Key="BooleanToTransitionConverter"/>
        <conv:SandwichToFirstLetterConverter x:Key="SandwichToFirstLetterConverter"/>

        <!-- jump list re-templates in order to add the MetroInMotion
         IsPivotedAnimated to the container ItemsControl -->
        <ControlTemplate x:Key="JumpListTemplate">
            <Grid>
                <jumpList:JumpListItemsControl x:Name="JumpListItems"
                          ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlattenedCategories}">
                    <i:Interaction.Behaviors>
                        <behaviour:PivotSlideBehaviour/>
                    </i:Interaction.Behaviors>
                    <jumpList:JumpListItemsControl.Resources>
                        <Storyboard x:Key="JumpListItemsShowAnim">
                            <DoubleAnimation To="1.0" Duration="0:0:0.5"
                                   Storyboard.TargetName="JumpListItems"
                                   Storyboard.TargetProperty="(ScrollViewer.Opacity)"/>
                        </Storyboard>
                        <Storyboard x:Key="JumpListItemsHideAnim">
                            <DoubleAnimation To="0.35" Duration="0:0:0.5"
                                   Storyboard.TargetName="JumpListItems"
                                   Storyboard.TargetProperty="(ScrollViewer.Opacity)"/>
                        </Storyboard>
                    </jumpList:JumpListItemsControl.Resources>
                    <jumpList:JumpListItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel/>
                        </ItemsPanelTemplate>
                    </jumpList:JumpListItemsControl.ItemsPanel>
                    <jumpList:JumpListItemsControl.Template>
                        <ControlTemplate TargetType="jumpList:JumpListItemsControl">
                            <ScrollViewer x:Name="ScrollViewer">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </ControlTemplate>
                    </jumpList:JumpListItemsControl.Template>
                </jumpList:JumpListItemsControl>


                <Grid IsHitTestVisible="False"
                      x:Name="LoadingIndicator"
                      Opacity="0">
                    <TextBlock Text="Loading ..."
                      HorizontalAlignment="Right"/>
                </Grid>


                <ItemsControl x:Name="CategoryItems"
                      Visibility="Collapsed"                      
                      ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CategoryList}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <tk:WrapPanel Background="Transparent"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <ScrollViewer x:Name="ScrollViewer">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </ControlTemplate>
                    </ItemsControl.Template>
                </ItemsControl>

            </Grid>
        </ControlTemplate>

        <!-- a template for the jumplist that includes
        a category indicator -->
        <ControlTemplate x:Key="JumpListTemplateWithIndicator">
            <Grid>
                <!-- <tkLayout:TransitioningContentControl
              HorizontalAlignment="Right"
              VerticalAlignment="Top"
              Width="150"
              Margin="0,-50,0,0"
              Content="{Binding Path=(mim:ListUtils.FirstVisibleItem), ElementName=JumpListItems, Converter={StaticResource SandwichToFirstLetterConverter}}"
              Transition="{Binding Path=(mim:ListUtils.IsScrollingUpwards), ElementName=JumpListItems, Converter={StaticResource BooleanToTransitionConverter}}">
          <tkLayout:TransitioningContentControl.ContentTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding}"
                         Opacity="0.6"
                         FontSize="150"/>
            </DataTemplate>
          </tkLayout:TransitioningContentControl.ContentTemplate>
        </tkLayout:TransitioningContentControl>-->

                <jumpList:JumpListItemsControl x:Name="JumpListItems"
                          ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlattenedCategories}">
                    <i:Interaction.Behaviors>
                        <behaviour:PivotSlideBehaviour/>
                    </i:Interaction.Behaviors>
                    <jumpList:JumpListItemsControl.Resources>
                        <Storyboard x:Key="JumpListItemsShowAnim">
                            <DoubleAnimation To="1.0" Duration="0:0:0.5"
                                           Storyboard.TargetName="JumpListItems"
                                           Storyboard.TargetProperty="(ScrollViewer.Opacity)"/>
                        </Storyboard>
                        <Storyboard x:Key="JumpListItemsHideAnim">
                            <DoubleAnimation To="0.35" Duration="0:0:0.5"
                                               Storyboard.TargetName="JumpListItems"
                                               Storyboard.TargetProperty="(ScrollViewer.Opacity)"/>
                        </Storyboard>
                    </jumpList:JumpListItemsControl.Resources>
                    <jumpList:JumpListItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel/>
                        </ItemsPanelTemplate>
                    </jumpList:JumpListItemsControl.ItemsPanel>
                    <jumpList:JumpListItemsControl.Template>
                        <ControlTemplate TargetType="jumpList:JumpListItemsControl">
                            <ScrollViewer x:Name="ScrollViewer">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </ControlTemplate>
                    </jumpList:JumpListItemsControl.Template>
                </jumpList:JumpListItemsControl>


                <Grid IsHitTestVisible="False"
                      x:Name="LoadingIndicator"
                      Opacity="0">
                    <TextBlock Text="Loading ..."
                      HorizontalAlignment="Right"/>
                </Grid>


                <ItemsControl x:Name="CategoryItems"
                              Visibility="Collapsed"                      
                              ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CategoryList}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <tk:WrapPanel Background="Transparent"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <ScrollViewer x:Name="ScrollViewer">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </ControlTemplate>
                    </ItemsControl.Template>
                </ItemsControl>

            </Grid>
        </ControlTemplate>

        <Style TargetType="Button" x:Key="JumpButtonStyle">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Width" Value="64"/>
            <Setter Property="Height" Value="64"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        
        <!--Pivot Control-->
        <controls:Pivot Title="SandwichFlow"
                    Foreground="Black">

            <controls:PivotItem Header="All Sarnies">
                <Grid>
                    <contribControls:DeferredLoadContentControl Foreground="Black">
                        <jumpList:JumpList  ItemsSource="{Binding Sandwiches}"    
                                             Template="{StaticResource JumpListTemplate}"
                                             JumpButtonStyle="{StaticResource JumpButtonStyle}"
                                             ItemTemplate="{StaticResource SandwichTemplate}"                         
                                             SelectionChanged="SandwichesJumpList_SelectionChanged">
                            <jumpList:JumpList.CategoryProvider>
                                <jumpList:AlphabetCategoryProvider PropertyName="Title"/>
                            </jumpList:JumpList.CategoryProvider>
                        </jumpList:JumpList>
                    </contribControls:DeferredLoadContentControl>
                </Grid>
            </controls:PivotItem>

            <controls:PivotItem Header="Ingredients">
                <Grid>
                    <jumpList:JumpList  ItemsSource="{Binding Keywords}"
                                       Template="{StaticResource JumpListTemplateWithIndicator}"
                                       JumpButtonStyle="{StaticResource JumpButtonStyle}"
                                       ItemTemplate="{StaticResource KeywordTemplate}"
                                       SelectionChanged="KeywordsJumpList_SelectionChanged">
                        <jumpList:JumpList.CategoryProvider>
                            <jumpList:AlphabetCategoryProvider PropertyName="Name"/>
                        </jumpList:JumpList.CategoryProvider>
                    </jumpList:JumpList>
                </Grid>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True"
                              BackgroundColor="#CCFFFFFF"
                              ForegroundColor="Black">
            <shell:ApplicationBarIconButton IconUri="/search.png"
                                            Text="Search"
                                            Click="ApplicationBarIconButton_Click"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>